import { Select } from 'antd';
import React, { useEffect, useRef, useState } from 'react'
import * as echarts from 'echarts'

import { getAllCostRequest } from '@/apis/admin';
import { OptionType } from '@/store/parking';
const option: any = {
	title: {
		text: '所有楼',
		left: 'center'
	},
	tooltip: {
		trigger: 'item'
	},
	legend: {
		orient: 'vertical',
		left: 'left'
	},
	series: [
		{
			name: 'Access From',
			type: 'pie',
			radius: '50%',
			data: [],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}
	]
};
const StatisticsAll: React.FC = () => {
	const chartRef = useRef<HTMLDivElement>(null);
	const myecharts = useRef<echarts.ECharts>();
	const [everyBuilding, setEveryBuilding] = useState<{ [key: string]: any[] }>({})
	const [building, setBuilding] = useState<OptionType[]>()
	const [selected, setSelected] = useState<string>('所有楼')
	useEffect(() => {
		getAllCostRequest().then((re: any) => {
			const res = re.result
			setEveryBuilding(res.everyBuilding)
			const buildings = Object.keys(res.everyBuilding).map((item: any) => ({
				value: item,
				label: item
			}))
			setBuilding(buildings)
			if (!option.series) return
			option.series[0].data = res.everyBuilding['所有楼']
			option.title.text = '所有楼'
			myecharts.current = echarts.init(chartRef.current as HTMLDivElement)
			myecharts.current.setOption(option)
		})
		return () => {
			myecharts.current?.dispose()
		}
	}, [])
	const onSelect = (value: string) => {
		setSelected(value)
		option.series[0].data = everyBuilding[value]
		option.title.text = value
		myecharts.current?.setOption(option)
	}
	return <div>
		<Select options={building} value={selected} onSelect={onSelect}></Select>
		<div ref={chartRef} style={{ width: "620px", height: "400px" }}></div>
	</div>
}
export default StatisticsAll